<template>
    <el-container class="deptTree">
        <el-aside width="240px">
            <div class="search-bar">
                <el-input placeholder="请输入搜索关键词" v-model="searchTxt">
                    <template #append>
                        <el-button :icon="Search" type="default"/>
                    </template>
                </el-input>
            </div>
            <el-tree :data="tree.data"
                     :props="tree.props"
                     :height="400"
                     :highlight-current="true"
                     :expand-on-click-node="false"
                     :icon="CaretRight"
                     :filter-node-method="filterNode"
                     v-loading="loading"
                     element-loading-text="正在加载部门数据"
                     ref="deptTree"
                     node-key="id"
                     @node-click="handleNodeClick"
            >
                <template #default="{ node }">
                    <span class="label">{{ node.label }}</span>
                </template>
            </el-tree>
        </el-aside>
        <el-main>
            <dept-tree-tab ref="deptTab" @refresh-data="refreshData"/>
        </el-main>
    </el-container>
</template>

<script>
    import {Delete,FolderAdd,Document,Folder,CaretRight,Search} from '@element-plus/icons-vue'
    import {getCompanyWithDeptList} from "../../../network/sys/company";
    import DeptTreeTab from "./DeptTreeTab.vue";
    import {ElLoading} from "element-plus";

    export default {
        name: "DeptTree",
        components: {DeptTreeTab},
        setup(){
            return{
                FolderAdd,
                Document,
                Delete,
                Folder,
                CaretRight,
                Search
            }
        },
        data(){
            return{
                tree:{
                    data:[],
                    props:{
                        value: 'id',
                        label: 'name',
                        children: 'children',
                    },
                    expandKeys: [-1,1,2],
                },
                dept: {
                    deptName:'最高部门'
                },
                searchTxt: null,
                id: -1,
                loading: false
            }
        },
        methods:{
            filterNode(value,data){
                // console.log('value',value)
                // console.log('data',data)
                if (!value) return true
                return data.name.includes(value);
            },
            refreshData(){
                this.loadDeptTreeData();
            },
            handleNodeClick(data,node,prop) {
                if(node.level === 1){
                    // console.log('data',data)
                    // console.log('node',node)
                    // console.log('prop',prop)
                    this.$refs.deptTab.companyId = data.id;
                }
            },
            /*load*/
            loadDeptTreeData(){
                this.loading = true;
                getCompanyWithDeptList(this.searchTxt).then(vo=>{
                    this.loading = false;
                    this.$response.handle({
                        data: vo,
                        successFn: ()=>{
                            this.tree.data = vo.data;
                        },
                        log: '公司部门表数据'
                    })
                })
            },
            init(){
                this.loadDeptTreeData();
            }
        },
        created() {
            this.init();
        },
        watch:{
            searchTxt:function (val){
                this.$refs.deptTree.filter(val);
            }
        }
    }
</script>

<style scoped>
    *{
        /*border: 1px solid red;*/
    }
    .label{
        font-size: 14px;
        padding: 0 4px;
    }
    .el-container{
        height: 99%;
        background: white;
    }
    .el-tree{
        /*border: 1px solid red;*/
        padding: 4px 4px;
        height: 100%;
        box-sizing: border-box;
    }
    .el-vl__wrapper{
        height: 100%;
    }
    .el-main{
        padding: 0;
    }
    .search-bar{
        padding: 10px 0;
    }
</style>
<style>
    .el-tree-node__expand-icon{
        /*display: none;*/
    }
</style>